<template>
  <view class="container">
    <view class="list">
      <view class="box">
        <view class="row">
          <view class="text">项目名称：</view>
          <view class="right">
            <view class="name">{{ info.info.name }}</view>
          </view>
        </view>
        <view class="row">
          <view class="text">适用对象：</view>
          <view class="right">
            <view class="name">{{ info.info.applicable_objects }}</view>
          </view>
        </view>
        <view class="row">
          <view class="text">联系人：</view>
          <view class="right">
            <view class="name">{{ info.info.head_name }}，{{ info.info.head_mobile }}</view>
          </view>
        </view>

        <view class="row" style="align-items: flex-start">
          <view class="text">申报资料上传：</view>
          <view class="download-list">
            <view class="file_box" @click="downloadFile(item.file_url, item.all_name)" v-for="(item, index) in info.project_file" :key="index">
              <image class="download" src="../../static/images/download.png"></image>
              <text>{{ item.name }}</text>
            </view>
          </view>
        </view>

        <view class="row" style="align-items: center">
          <view class="text">申报资料：</view>
          <view class="button up-btn" @click="uploadFiles">上传申报资料</view>
        </view>
        <view class="row">
          <view class="text"></view>
          <view class="download-list" style="min-width: 0">
            <view class="file_box" @click="deleteFile(index)" v-for="(item, index) in file_arr" :key="index">
              <text class="file_name">{{ item.name }}</text>
              <image class="del" src="/static/images/del.png"></image>
            </view>
          </view>
        </view>


        <view class="row" style="align-items: center">
          <view class="text">发票：</view>
          <view class="button up-btn" @click="uploadInvoices">上传发票</view>
        </view>

        <view class="row">
          <view class="text"></view>
          <view class="download-list" style="min-width: 0">
            <view class="file_box" @click="deleteInvoiceFile(index)" v-for="(item, index) in invoice_arr" :key="index">
              <text class="file_name">{{ item.name }}</text>
              <image class="del" src="/static/images/del.png"></image>
            </view>
          </view>
        </view>

        <view class="btn-box" v-if="info.can_submit">
          <button class="button save" @click="submit">立即提交</button>
        </view>
        <view class="btn-box" v-else>
          <view class="button cancel">后台审核中...</view>
        </view>
      </view>
    </view>


  </view>
</template>

<script>
export default {
  data() {
    return {
      info: [],
      file_arr: [],
      invoice_arr: [],
    }
  },

  onLoad(options) {
    var project_id = options.project_id;

    this.$http.post('/index/Api/subsidyApplyInfo', {project_id}).then(res => {
      if (res.data.result == 1) {
        this.info = res.data.data
        this.file_arr = res.data.data.subsidy_file_arr
        this.invoice_arr = res.data.data.invoice_arr
      } else {
        this.$common.doErrorResult(res)
      }
    })

  },

  methods: {
    downloadFile: function (url, all_name) {
      uni.showLoading({
        title: '下载中'
      })

      //下载文件
      uni.downloadFile({
        url: url,
        success: (res) => {
          //下载成功
          if (res.statusCode === 200) {
            //保存文件
            let tempFile = res.tempFilePath;
            //保存成功之后 打开文件
            uni.getFileSystemManager().saveFile({
              tempFilePath: tempFile,
              filePath: wx.env.USER_DATA_PATH + '/' + all_name,//自定义文件名
              success(res) {
                wx.hideLoading();
                uni.openDocument({
                  filePath: res.savedFilePath,
                  showMenu: true, //是否可以分享
                  success: (res) => {
                    uni.hideLoading()
                    console.log(res);
                  },
                  fail: (e) => {
                    uni.showToast({
                      title: '打开失败',
                      icon: "error"
                    })
                  }
                })

              }
            })
          }
        },
        fail: (e) => {
          uni.hideLoading();
          uni.showToast({
            title: '文件下载失败',
            icon: "error",
          })
        }
      });

    },

    uploadFiles: function () {
      if (!this.info.can_submit) {
        uni.showToast({
          title: '后台审核中...',
          icon: 'none'
        })
        return;
      }

      this.$common.uploadFiles(res => {
        res = JSON.parse(res);
        if (res.status == 1) {
          var file = res.data,
            file_arr = this.file_arr;

          file_arr.push(file);
          this.file_arr = file_arr;

          uni.showToast({
            title: '上传成功',
            duration: 1000
          })
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      })
    },

    deleteFile: function (index) {
      if (!this.info.can_submit) {
        uni.showToast({
          title: '后台审核中...',
          icon: 'none'
        })
        return;
      }

      var file_arr = this.file_arr;
      file_arr.splice(index, 1);
      this.file_arr = file_arr;
    },

    uploadInvoices: function () {
      if (!this.info.can_submit) {
        uni.showToast({
          title: '后台审核中...',
          icon: 'none'
        })
        return;
      }

      var invoice_arr = this.invoice_arr;
      this.$common.uploadInvoices(res => {
        res = JSON.parse(res);
        if (res.status == 1) {
          var resource = res.data;
          invoice_arr.push(resource);

          uni.showToast({
            title: '上传成功',
            duration: 1000
          })
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      })
    },

    deleteInvoiceFile: function (index) {
      if (!this.info.can_submit) {
        uni.showToast({
          title: '后台审核中...',
          icon: 'none'
        })
        return;
      }

      var invoice_arr = this.invoice_arr;
      invoice_arr.splice(index, 1);
      this.invoice_arr = invoice_arr;
    },

    submit: function () {
      var user_id = uni.getStorageSync('user_id'),
        project_id = this.info.info.id,
        file_arr = this.file_arr,
        file_ids = file_arr.length > 0 ? file_arr.map(item => item.id).join(',') : '',
        invoice = JSON.stringify(this.invoice_arr),
        timestamp = Date.parse(new Date()),//该值除以1000就是当前的时间戳,
        sync_timestamp = uni.getStorageSync('timestamp') ? uni.getStorageSync('timestamp') : 0,//获取时间戳缓存,
        now_timestamp = timestamp / 1000,
        long_time = now_timestamp - sync_timestamp;//距离上次点击按钮经过的时长（秒）,

      uni.showLoading({
        title: '提交中...',
        mask: true
      })

      if (long_time > 3) {
        //将当前时间戳存为缓存
        uni.setStorageSync('timestamp', timestamp / 1000);

        this.$http.post('/index/Api/submitApplySubsidy', {
          user_id, project_id, file_ids, invoice: invoice
        }).then(res => {
          uni.removeStorageSync('timestamp');
          uni.hideLoading();

          if (res.data.result == 1) {
            uni.showToast({
              title: res.data.msg,
              success: () => {
                setTimeout(() => {
                  uni.navigateBack()
                }, 500)
              }
            })
          } else {
            this.$common.doErrorResult(res);
          }
        })
      }
    }
  }
}
</script>

<style lang="scss">
.container {
  padding: 20rpx;
  background: #f5f5f5;

  .list {

    .box {
      display: flex;
      flex-direction: column;
      padding: 16rpx 24rpx;
      margin-bottom: 20rpx;
      background: #fff;
      border-radius: 20rpx;

      .title {
        font-size: 32rpx;
        font-weight: bold;
      }

      .row {
        display: flex;
        align-items: flex-start;
        margin-top: 14rpx;

        .text {
          font-size: 28rpx;
          width: 200rpx;
          font-weight: bold;
          text-align: right;
        }

        .left {
          font-size: 28rpx;
          font-weight: bold;
        }

        .right {
          min-width: 0;
          flex: 1;
          display: flex;
          align-items: flex-end;
          font-size: 24rpx;
          color: #3D3D3D;
          margin-left: 20rpx;

          .count {
            width: 100rpx;
          }

          .name {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .info-box {
            display: flex;
            justify-content: space-between;
            width: 230rpx;
            margin-left: 20rpx;
          }

          .type {
            background: #b574ff;
            padding: 2rpx 16rpx;
            border-radius: 10rpx;
            font-size: 18rpx;
            color: #fff;
          }

          .time {
            flex: 1;
          }

          label {
            display: flex;
            align-items: center;
            margin-right: 50rpx;
          }

          .textarea {
            padding: 20rpx;
            border: 1rpx solid #f5f5f5;
            width: 70%;
            height: 120rpx;
          }
        }

        .img-box {
          width: 50%;

          image {
            width: 100%;
            height: 220rpx;
          }
        }

        .up-btn {
          font-size: 24rpx;
          text-align: center;
          border-radius: 50rpx;
          background: #fff;
          padding: 10rpx 30rpx;
          color: #32A4FF;
          border: 1rpx solid #32A4FF;
        }

        .download-list {
          width: calc(100 - 230rpx);
          flex: 1;

          .file_box {
            display: flex;
            margin-bottom: 10rpx;
            align-items: center;
            margin-left: 20rpx;

            .download {
              width: 30rpx;
              height: 30rpx;
              margin-right: 10rpx;
            }

            text {
              color: #3D3D3D;
              flex: 1;
            }

            .file_name {
              flex: 1;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .del {
              width: 50rpx;
              height: 50rpx;
              margin-left: 20rpx;
            }
          }
        }
      }

      .btn-box {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-top: 40rpx;

        .button {
          font-size: 32rpx;
          flex: 1;
          text-align: center;
          border-radius: 50rpx;
        }

        .cancel {
          background: #fff;
          padding: 20rpx 40rpx;
          color: #32A4FF;
          border: 1rpx solid #32A4FF;
        }

        .save {
          background: #32A4FF;
          color: #fff;
          border: none;
          outline: none;
        }
      }

    }
  }

}

</style>
